<template>
  <narrow>
    <div class="register">
        <h1 class="regester-title">注册</h1>
        <!-- 注册表单 -->
        <div class="register-form">
          <!-- 用户名 -->
          <div class="form-group">
            <input class="form-control" type="text" name placeholder="请输入用户名" v-model="userName" @input="inputUserName" />
            <small class="username-info" v-if="isExits">用户名已经存在</small>
          </div>
          <!-- 密码 -->
          <div class="form-group">
            <input class="form-control" type="password" v-model="password" placeholder="请输入密码" />
          </div>
          <div class="form-group">
            <input class="form-control" type="password" v-model="lastPassword" placeholder="重新输入密码" @input="comparePassword"/>
            <small class="password-repeat-info" v-if="showPasswordError">密码不一致</small>
          </div>
          <!-- 性别选项 -->
          <div class="form-group">
            <select class="form-control" v-model.lazy="gender">
              <option value="1">男</option>
              <option value="2">女</option>
              <option value="3">保密</option>
            </select>
          </div>
          <!-- 注册按钮 -->
          <div class="submit-group">
            <button class="submit-btn btn-primary btn" @click="submitRegister">注册</button>
            <router-link class="common-a" to="/login">已有账号，返回登录>></router-link>
          </div>
        </div>
    </div>
  </narrow>
</template>
<script>
import Narrow from 'components/common/Narrow'
import { getIsExits, register } from 'api/user'
export default {
  name: 'register',
  components: {
    Narrow
  },
  data () {
    return {
      isExits: false,
      userName: '',
      password: '',
      lastPassword: '',
      showPasswordError: false,
      gender: 1,
      beforeRouter: '/'
    }
  },
  methods: {
    /**
     * 判断输入的用户名是否已存在
     * @method inputUserName
     */
    async inputUserName () {
      // 发起请求
      let result = await getIsExits(this.userName)
      // 解析获得的数据
      // 返回的是是否存在改用户.
      if (result.errno === 0) {
        this.isExits = true
      } else {
        this.isExits = false
      }
    },
    /**
     * 比较两次输入密码是否相同
     * @method comparePassword
     */
    comparePassword () {
      // 判断两次输入的密码是否相等
      if (this.password !== this.lastPassword) {
        this.showPasswordError = true
      } else {
        this.showPasswordError = false
      }
    },
    /**
     * 提交注册用户
     * @method submitRegister
     */
    async submitRegister () {
      // 生成用户对象信息
      let userInfo = {
        userName: this.userName,
        password: this.password,
        gender: parseInt(this.gender)
      }
      // 所有信息填写无误
      if (this.isExits) {
        alert('用户名已存在')
        return ''
      }
      if (this.showPasswordError) {
        alert('密码不一致')
        return ''
      }
      // 调用注册api
      let isRegister = await register(userInfo)
      // 判断注册是否成功
      if (isRegister.errno === 0) {
        alert('注册成功')
        // 跳转到注册之前的页面
        this.$router.push({ path: '/login' })
      } else {
        alert(isRegister.message)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    // 使用回调才能访问到当前组件实例

    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.beforeRouter = from.path
    })
    next()
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/common';
.register{
  width: 400px;
  .regester-title{
    font-size: 40px;
    font-weight: 400;
    line-height: 1.5;
  }
  .register-form{
    .form-group{
      position: relative;
      small{
        position: absolute;
        display: block;
        top: 0;
        left: 102%;
        white-space: nowrap;
        line-height: 34px;
        font-size: 12px;
      }
    }
  }
  .common-a{
    margin-left: 10px;
  }
}
</style>
